<template>
  <div id="personalIndex">
    <div class="personal-message">
      <div class="personal-setbox">
        <span class="personal-set" @click="onset">
          <Icon
            class="personal-set-icon"
            size="24px"
            color="#ffffff"
            name="setting-o"
          />
        </span>
      </div>
      <div class="personal-datum">
        <div class="personal-head"></div>
        <div class="personal-namebox">
          <div class="personal-name">
            <span class="name-o">bbg</span>
          </div>
          <div class="personal-id">
            <span class="id-o">ID:16004</span>
          </div>
          <div class="personal-credit">信用分:100</div>
        </div>
        <div class="personal-vip"></div>
      </div>
    </div>
    <div class="personal-bodybox">
      <div class="personal-body">
        <Cell
          class="personal-cell cell-top"
          title="我的团队"
          is-link
          to="./team"
        >
          <template #icon>
            <img src="@/assets/icons/team.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell
          class="personal-cell"
          title="初级认证"
          is-link
          to="./primary"
          value="未认证"
        >
          <template #icon>
            <img src="@/assets/icons/primary.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell
          class="personal-cell"
          title="高级认证"
          is-link
          to="./advanced"
          value="未认证"
          ><template #icon>
            <img src="@/assets/icons/advanced.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="账变记录" is-link to="./record">
          <template #icon>
            <img src="@/assets/icons/record.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="极速持仓" is-link to="./topspeed">
          <template #icon>
            <img src="@/assets/icons/warehouse.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="合约持仓" is-link to="./contract">
          <template #icon>
            <img src="@/assets/icons/warehouse.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="钱包地址" is-link to="./site">
          <template #icon>
            <img src="@/assets/icons/wallet.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="银行账户" is-link to="./bank">
          <template #icon>
            <img src="@/assets/icons/bank.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="我要分享" is-link to="./share">
          <template #icon>
            <img src="@/assets/icons/share.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell
          class="personal-cell"
          title="在线客服"
          is-link
          to="./onlineservice"
        >
          <template #icon>
            <img src="@/assets/icons/service.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell" title="帮助中心" is-link to="./helpcenter">
          <template #icon>
            <img src="@/assets/icons/help.png" class="cell-icon" alt="" />
          </template>
        </Cell>
        <Cell class="personal-cell cell-bottom" title="平台介绍" is-link to="">
          <template #icon>
            <img src="@/assets/icons/platform.png" class="cell-icon" alt="" />
          </template>
        </Cell>
      </div>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import { Cell, Icon } from "vant";
export default {
  components: {
    Tabbar,
    Cell,
    Icon,
  },
  data() {
    return {};
  },

  // 创建时
  created() {},
  methods: {

    // 点击设置
    onset() {
      console.log('设置');
      this.$router.push({
        path: "./setcenter",
      })
    }
  },
};
</script>

<style lang="less" scoped>
#personalIndex {
  .personal-message {
    height: 270px;
    background-image: url("../../assets/images/movebricks_bg 2.png");
    background-size: 100% 100%;
    .personal-setbox {
      height: 50px;
      .personal-set {
        position: absolute;
        right: 14px;
        top: 10px;
        font-size: 24px;
      }
    }
    .personal-datum {
      padding: 10px;
      height: 140px;
      width: 350px;
      display: flex;
      .personal-head {
        width: 80px;
        height: 80px;
        background: lightslategray;
        margin: 10px;
        border-radius: 50px;
        background-image: url("~@/assets/images/logo.png");
        background-size: 100% 100%;
      }
      .personal-namebox {
        width: 120px;
        height: 120px;
        font-size: 16px;
        padding-top: 10px;
        .personal-name {
          border: white solid 1px;
          width: 118px;
          height: 31px;
          border-radius: 20px;
          text-align: center;
          background: #d5f7ff;
          .name-o {
            color: #5a8af8;
            display: inline-block;
            margin: 8px auto;
          }
        }
        .personal-id {
          border: white solid 1px;
          width: 118px;
          height: 31px;
          margin-top: 10px;
          border-radius: 20px;
          text-align: center;
          background: #d5f7ff;
          .id-o {
            color: #5a8af8;
            display: inline-block;
            margin: 8px auto;
          }
        }
        .personal-credit {
          width: 120px;
          margin-top: 10px;
          text-align: center;
          color: white;
          font-size: 14px;
        }
      }
      .personal-vip {
        width: 70px;
        height: 35px;
        margin: 40px 10px;
        background-image: url("~@/assets/images/viplogan.png");
        background-size: 100% 100%;
      }
    }
  }
  .personal-bodybox {
    width: 100%;
    background: #f7f6fb;
    padding-bottom: 70px;
    margin-top: -12px;
    .personal-body {
      width: 340px;
      margin: auto;
      .personal-cell {
        height: 60px;
        padding-top: 20px;
      }
      .cell-top {
        border-radius: 10px 10px 0 0;
      }
      .cell-bottom {
        border-radius: 0 0 10px 10px;
      }
      .cell-icon {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
    }
  }
}
</style>
